/**
 * AnimateBanner
 * 把图片以背景形式显示
 * 原理
 *		依次按时间间隔遍历图片 把图片以背景形式显示到容器中
 * @author yulipu
 * @param object container 容纳背景图片的容器
 * @param array imgArr 待显示的图片
 *
 * 例 仅供参考
 * 		<div class="y-banner-bg" id="bannerbg">  <!-- 图片容器 图片将以背景形式显示在这里 -->
 *			<img src="Upload/banner/banner_01.jpg" />  <!-- 图片用css控制隐藏掉 -->
 *			<img src="Upload/banner/banner_02.jpg" />
 *		</div>
 *		var obj = document.getElementById('bannerbg');
 *		var imgs = obj.getElementsByTagName('img');
 *		var anim = new AnimateBanner(obj, imgs);
 *		anim.start();
 */
function AnimateBanner(container, imgArr) {
	this.t = 6000;
	this.container = container;  // 容器对象
	this.cacheImg = imgArr || [];  // 图片缓存
	this.index = 0;
	this.flag = 1;
}
AnimateBanner.prototype = {
	constructor : AnimateBanner
	,setImg : function(imgPath) {
		this.cacheImg.push(imgPath);
	}
	,setBgStyle : function() {
		//this.container.style.backgroundPosition = '0 0';  // css文件中设置过了
		//this.container.style.backgroundRepeat = 'no-repeat';
		
		// 过度 css文件中设置过了
		//this.container.style.transition = 'background 1s linear';
	}
	,setBgImage : function(i) {
		this.container.style.backgroundImage = "url("+ this.cacheImg[i] +")";
	}
	,animate : function(){
		var _self = this;
		var len = _self.cacheImg.length;
		if(_self.index == len-1) {
			_self.setBgImage(_self.index);
			_self.index = 0;
		} else {
			_self.setBgImage(_self.index++);
		}
		
		setTimeout(function(){_self.animate();}, _self.t);
	}
	,start : function() {
		// 安全检测
		if(this.cacheImg.length >= 1) {
			var _self = this;
			_self.setBgStyle();
			_self.setBgImage(_self.index++);  // 先用后加
			
			setTimeout(function(){_self.animate();}, _self.t);
		}
	}
};
